| vue项目初始化之axios封装 | 您所在的位置：网站首页 › 封装console log › vue项目初始化之axios封装 |
vue项目初始化之axios封装
|
目录1.初始化Vue项目2.Vue之封装axios安装为什么要封装axios引入在http.js页面添加：1.环境的切换2.设置请求超时3.post/put请求头的设置4.请求拦截5.响应拦截6.封装get post put delete方法总结：api.js页面应用到组件
参考掘金：https://juejin.im/post/6844903652881072141#heading-8 1.初始化Vue项目参考博客 ：https://www.cnblogs.com/xiaonq/p/11027880.html #使用脚手架创建vue项目 deaxios是项目名，随便取 vue init webpack deaxios cd deaxios #进入项目 npm install axios -S #安装 axios
可以参考大佬博客： https://blog.csdn.net/qq_40128367/article/details/82735310 https://www.cnblogs.com/xiaonq/p/11027880.html 安装 npm install axios --save 为什么要封装axios axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。 引入一般我会在项目的components目录中，新建一个axios_api文件夹，然后在里面新建一个http.js和一个api.js文件。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口。
请求头设置application/x-www-form-urlencoded; 或 application/json post/put请求的时候，我们需要加上一个请求头，所以可以在这里进行一个默认的设置，即设置post的请求头为 application/json /* 设置请求传递数据的格式(看服务器要求的格式) x-www-form-urlencoded 默认提交表单 把数据对象序列化成表单数据 */ // axios.defaults.headers['Content-Type']='application/x-www-form-urlencoded'; // axios.defaults.transformRequest =data=>qs.stringify(data); /* 设置默认提交json 把数据对象序列化成json字符串 */ //axios.defaults.headers['Content-Type'] = 'application/json'; //设置默认提交json //axios.defaults.transformRequest = data => JSON.stringify(data) //把数据对象序列化成json字符串 axios.defaults.headers.post['Content-Type'] =' application/json'; axios.defaults.headers.put['Content-Type'] = 'application/json'; 4.请求拦截 /* 请求拦截器：发送请求前需要调用这个函数 1.当没有登录时，直接跳转到登录页 2.请求发送前把token获取 设置到header中 */ axios.interceptors.request.use( config => { // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了 const token = sessionStorage.getItem("jwt_token"); console.log(token); if (token){ config.headers.Authorization = 'JWT '+ token } return config; }, error => { return Promise.error(error); }); 5.响应拦截 axios.interceptors.response.use( // 请求成功 res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res), // 请求失败 error => { if (error.response) { // 判断一下返回结果的status == 401？ ==401跳转登录页面。 ！=401passs console.log(error.response); if(error.response.status===401){ // 跳转不可以使用this.$router.push方法、 // this.$router.push({path:'/login'}) window.location.href="http://127.0.0.1:8080/#/login" }else{ // errorHandle(response.status, response.data.message); return Promise.reject(error.response); } // 请求已发出，但是不在2xx的范围 } else { // 处理断网的情况 // eg:请求超时或断网时，更新state的network状态 // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏 // 关于断网组件中的刷新重新获取数据，会在断网组件中说明 // store.commit('changeNetwork', false); return Promise.reject(error.response); } }); 6.封装get post put delete方法 // 封装xiaos请求 封装axios里的get export function axios_get(url,params){ return new Promise( (resolve,reject)=>{ axios.get(url,{params:params}) .then(res=>{ console.log("封装信息的的res",res); resolve(res.data) }).catch(err=>{ reject(err.data) }) } ) } // 封装xiaos请求 封装axios里的post export function axios_post(url,data){ return new Promise( (resolve,reject)=>{ console.log(data); axios.post(url,JSON.stringify(data)) .then(res=>{ console.log("封装信息的的res",res); resolve(res.data) }).catch(err=>{ reject(err.data) }) } ) } // 封装xiaos请求 封装axios里的put export function axios_put(url,data){ return new Promise( (resolve,reject)=>{ console.log(data); axios.put(url,JSON.stringify(data)) .then(res=>{ console.log("封装信息的的res",res); resolve(res.data) }).catch(err=>{ reject(err.data) }) } ) } // 封装xiaos请求 封装axios里的delete export function axios_delete(url,data){ return new Promise( (resolve,reject)=>{ console.log(data); axios.delete(url,{params:data}) .then(res=>{ console.log("封装信息的的res",res); resolve(res.data) }).catch(err=>{ reject(err.data) }) } ) } 总结： axios.get()方法和axios.post()在提交数据时参数的书写方式还是有区别的。区别就是，get的第二个参数是一个{}，然后这个对象的params属性值是一个参数对象的。而post的第二个参数就是一个参数对象。两者略微的区别要留意哦！ api.js页面 //将我们http.js中封装好的 get,post.put,delete 导过来 import {axios_get, axios_post, axios_delete, axios_put} from './http.js' //按照格式确定方法名 export const user_get = p => axios_get("/user/user/", p); export const add_post1 = p => axios_post("/user/user/", p); //向后端传输要修改数据的id export const user_updatad = p => axios_put("/user/user/?id="+p.id, p); export const del = p => axios_delete("/user/user/", p ); 应用到组件 查询数据 点击添加姓名：{{i.name}} 修改 删除 年龄：{{i.age}} 家乡：{{i.home}} import {user_get,del} from '../axios_api/api'; export default { name: "Get", data() { return { list: [], id: '', } }, methods: { //查询数据 get_data(){ user_get().then(resp => { this.list = resp; console.log(resp) }); }, //点击跳转添加页面 add_post() { this.$router.push('/post') }, //点击跳转修改页面 created(id) { this.$router.push({path: "/updated?id=" + id}) }, //删除 user_del(id){ del({id:id}) .then(resp => { console.log(resp); if (resp.code == '200') { alert('删除成功!!!') } else { alert('删除失败---') } }).catch(error => { console.log(error) }) }, }, //初始化页面后就会执行这个函数 mounted: function () { this.get_data() }, created() {} } |
【本文地址】
公司简介
联系我们